<template>
  <view>
    <u-navbar :border-bottom="false" :is-back="false" title="" :background="{backgroundColor: 'rgba(0,0,0,0)'}">
      <view class="navbars u-f-ac u-f-jsb">
        <view class="u-f1">
          <u-icon @click="$u.route({type: 'back', delta: 1})" name="arrow-left" size="34" color="#fff"></u-icon>
        </view>
        <view class="u-f-ajc">
          <image src="/static/images/header.png" mode="widthFix"></image>
        </view>
        <view class="u-f1" style="text-align: right;">
          <!-- <u-button type="error" size="mini" :custom-style="customStyle" @click="showPopup=true">汇购预排</u-button> -->
        </view>
      </view>
    </u-navbar>

    <view class="num_box f-w-700 u-f-ajc u-f-column">
      <view>订单列表</view>
    </view>

    <view class="wrap">
      <view class="tabs-view2 u-f-ac u-f-jsb">
        <!-- <u-tabs :list="tabsList" active-color="#FD5B00" :is-scroll="false" :current="current" @change="change"></u-tabs> -->
        <view class="tabs_item u-f-ajc" :class="index == current ? 'tabs_active' : ''" v-for="(item, index) in tabsList"
          :key="index" @click="change(index)">{{item.name}}</view>
      </view>
      <view class="swiper-box">
        <mescroll-body ref="mescrollRef" top="0" auto="false" :down="down" @init="mescrollInit" @down="downCallback"
          @up="upCallback">
          <view class="order-list-view" v-for="(order,index) in orderList" :key="index">
            <view class="order-header">
              <view class="order-sn" @click="onSellerDetail(order.seller_id,order.seller_name)">
                <view class="seller-name u-flex">
                  <u-icon name="shop" custom-prefix="custom-icon" size="35"></u-icon>
                  <view class="u-margin-left-10" style="font-weight: 400;">{{order.seller_name}}</view>
                  <!-- <u-icon name="arrow-right" color="#c8c9cc"></u-icon> -->
                </view>
              </view>
              <view class="order-status">
                {{order.order_type === 'PINTUAN' ? order.ping_tuan_status : order.order_status_text}}
              </view>
            </view>
            <view class="goods-list-view u-f-ac" v-for="(sku,skuIndex) in order.sku_list" @click="onDetail(order.sn)">
              <!-- <goods-info :goodsName="sku.name" :goodsNum="sku.num" :goodsPrice="sku.subtotal"
                :goodsImg="sku.goods_image" :goodsSpecList="sku.spec_list" :goodsType="order.order_type">
              </goods-info> -->
              <view class="left_image">
                <image :src="sku.goods_image"></image>
              </view>
              <view class="right_box">
                <view class="goods_title text-overflow2">{{sku.name}}</view>
                <view class="u-f-ac">
                  <custom-price :price="sku.subtotal" :size="30" :textColor="'#FF1634'"
                    :fontWeight="600"></custom-price>
                  <!-- <view style="margin-left: 20rpx;">x{{sku.num}}</view> -->
                </view>
              </view>
            </view>
            <!-- <view class="order-assemble" v-if="order.waiting_group_nums">
              还差<text style="color: #FD5B00;">{{ order.waiting_group_nums }}</text>人成团
            </view> -->
            <!-- <view class="order-price-view">
              <text class="order-total-price">总价</text>
              <custom-price :price="order.order_amount+order.discount_price" :size="25"
                :textColor="'#82848a'"></custom-price>
              <text class="order-total-price">, 优惠</text>
              <custom-price :price="order.discount_price" :size="25" :textColor="'#82848a'"></custom-price>
            </view> -->
            <!-- <view class="order-price-view">
              <text class="order-pay-price">实付款</text>
              <custom-price :price="order.order_amount" :size="33" :textColor="'#303133'"
                :fontWeight="600"></custom-price>
            </view> -->
            <view class="order-footer u-flex u-row-right">
              <u-button size="mini" shape="circle" :plain="true" :custom-style="customStyle"
                v-if="order.order_operate_allowable_vo.allow_cancel" @click="onCancel(order.sn)">取消订单</u-button>
              <u-button size="mini" shape="circle" type="error" :plain="true" :custom-style="customStyle"
                v-if="order.order_operate_allowable_vo.allow_pay" @click="onPay(order.sn)">去支付</u-button>
              <u-button size="mini" shape="circle" :plain="true" :custom-style="customStyle"
                v-if="order.order_operate_allowable_vo.allow_service_cancel"
                @click="onServiceCancel(order.sn)">取消订单</u-button>
              <u-button size="mini" shape="circle" :plain="true" :custom-style="customStyle"
                v-if="order.order_operate_allowable_vo.allow_rog" @click="onRog(order.sn)">确认收货</u-button>
              <u-button size="mini" shape="circle" type="error" :plain="true" :custom-style="customStyle"
                v-if="order.order_operate_allowable_vo.allow_comment"
                @click="onComment(order.sn,order.sku_list)">评价</u-button>
              <u-button size="mini" shape="circle" type="error" :plain="true" :custom-style="customStyle"
                v-if="order.comment_status === 'WAIT_CHASE'" @click="addEvaluation(order)">追加评论</u-button>
            </view>
          </view>

        </mescroll-body>
      </view>
    </view>
    <!-- 取消订单 popup -->
    <u-popup class="block-popup" v-model="cancelShow" mode="bottom" length="60%">
      <view class="header">
        取消订单
      </view>
      <view class="body">
        <view class="title">
          请选择取消订单的原因（必选）：
        </view>
        <u-radio-group v-model="reason">
          <view class="value">
            <view class="radio-view" v-for="(item,index) in cancelList">
              <u-radio active-color="red" label-size="30" shape="circle" :name="item.name"
                @change="reasonChange">{{item.name}}</u-radio>
            </view>
          </view>
        </u-radio-group>
      </view>
      <view class="footer">
        <u-button type="error" shape="circle" @click="submitCancel">提交</u-button>
      </view>
    </u-popup>
    <u-toast ref="uToast" />
    <u-modal v-model="rogShow" :content="content" :show-cancel-button="true" @confirm="confirmRog"></u-modal>
  </view>
</template>

<script>
  import * as API_Order from '@/api/order.js'
  // 引入mescroll-mixins.js
  import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

  export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
      return {
        rogShow: false,
        content: '请确认是否收到货物，否则可能会导致钱财两空',
        triggered: false,
        customStyle: {
          height: '60rpx',
          fontSize: '28rpx',
          margin: '0rpx 0rpx 0rpx 20rpx',
          padding: '0rpx 30rpx',
        },
        tabsList: [{
          name: '全部'
        }, {
          name: '待付款'
        }, {
          name: '待发货'
        }, {
          name: '待收货'
        }, {
          name: '待评价'
        }],
        current: 0,
        orderList: [],
        orderStatus: [{
          order_status: 'ALL',
        }, {
          order_status: 'WAIT_PAY',
        }, {
          order_status: 'WAIT_SHIP',
        }, {
          order_status: 'WAIT_ROG',
        }, {
          order_status: 'WAIT_COMMENT',
        }],
        params: {
          order_status: '',
          page_no: 1,
          page_size: 10,
        },
        //底部加载数据时的状态
        loadStatus: 'loading',
        //是否允许加载数据（true：允许）。如果没有更多的数据了，就不再调用API了。
        isLoad: true,
        //取消订单 popup
        cancelShow: false,
        reason: '',
        //当点击操作按钮时，设置选中的订单编号。
        orderSn: '',
        cancelList: [{
            name: '商品无货',
            disabled: false
          },
          {
            name: '不想要了',
            disabled: false
          },
          {
            name: '商品信息填写错误',
            disabled: false
          },
          {
            name: '地址信息填写错误',
            disabled: false
          },
          {
            name: '商品降价',
            disabled: false
          },
          {
            name: '其它',
            disabled: false
          }
        ],
        down: {
          auto: false
        }
      };
    },
    onLoad(options) {
      let value = options.value;
      if (this.$u.test.isEmpty(value)) {
        value = 0;
      }
      this.current = value;
      this.params.order_status = this.orderStatus[value].order_status;

      uni.$on('back', () => {
        this.change(this.current)
      });
    },
    methods: {
      change(index) {
        //跳转tab，初始化数据
        this.loadStatus = 'loading',
          this.isLoad = true,
          this.orderList = [];
        this.current = index;
        this.params = {
          order_status: this.orderStatus[index].order_status,
          page_no: 1,
          page_size: 10
        }
        this.mescroll.resetUpScroll(true)
      },
      getOrderList() {
        // this.loadStatus = 'loading';
        API_Order.getOrderList(this.params).then(res => {
          let orderList = res.data;
          orderList.forEach(order => {
            order.sku_list.forEach(sku => {
              let specValues = "";
              if (sku.spec_list !== null) {
                sku.spec_list.forEach(spec => {
                  specValues += spec.spec_value + ",";
                })
              }
              sku.spec_value_str = specValues.slice(0, specValues.length - 1);
            })
          })
          this.orderList = this.orderList.concat(orderList);
          this.mescroll.endBySize(res.data.length, res.data_total);
        })
      },
      //上拉加载数据
      upCallback(page) {
        this.params.page_no = page.num;
        this.getOrderList();
      },
      //下拉刷新
      downCallback() {
        this.change(this.current);
      },
      //取消订单（未支付）
      onCancel(orderSn) {
        this.cancelShow = true;
        this.orderSn = orderSn;
      },
      //支付订单
      onPay(order_sn) {
        // return this.$u.toast(`暂时维护中~请直接购买`)
        uni.navigateTo({
          url: '/pages/cashier/cashier?order_sn=' + order_sn
        })
      },
      //取消订单（已支付，未发货）
      onServiceCancel(order_sn) {
        uni.navigateTo({
          url: '/pages/order/after-sale/service-cancel?order_sn=' + order_sn
        })
      },
      //确认收货
      onRog(order_sn) {
        this.rogShow = true;
        this.orderSn = order_sn;
      },
      //评价
      onComment(order_sn, sku_list) {
        uni.navigateTo({
          url: `/pages/order/evaluation?order_sn=${order_sn}&sku_list=${encodeURIComponent(JSON.stringify(sku_list))}`
        })
      },
      addEvaluation(order) {
        console.log('order', order);
        this.$u.route('/mine-module/add-evaluation', {
          order_sn: order.sn
        });
      },
      //选择取消原因
      reasonChange(reason) {
        this.reason = reason;
      },
      //提交取消订单（未付款）
      submitCancel() {
        API_Order.cancelOrder(this.orderSn, this.reason).then(res => {
          this.cancelShow = false;
          this.$refs.uToast.show({
            title: '已取消订单',
            type: 'success',
            position: 'top'
          })
          this.downCallback();
        });
      },
      //跳转到商品详情页
      onDetail(orderSn) {
        uni.navigateTo({
          url: '/pages/order/order-detail?orderSn=' + orderSn,
        })
      },
      //跳转到店铺首页页
      onSellerDetail(sellerId, sellerName) {
        const _shopInfo = {
          shop_id: sellerId,
          shop_name: sellerName,
          shop_logo: '',
          tabNum: 0,
        };
        uni.navigateTo({
          url: '/pages/shop/shop' + this.$u.queryParams(_shopInfo, true, 'indices'),
        })
      },
      confirmRog() {
        API_Order.confirmReceipt(this.orderSn).then(res => {
          this.downCallback();
        })
      }
    }
  }
</script>

<style lang="scss">
  .wrap {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--window-top));
    width: 100%;
    background-color: #F4F5F7;
    border-radius: 40rpx 40rpx 0 0;
    padding: 50rpx 0 0;
  }

  .swiper-box {
    flex: 1;
    height: 90%;
  }

  .order-assemble {
    text-align: right;
    margin-right: 20rpx;
    color: #82848a;
    font-size: 24rpx;
  }

  .order-list-view {
    margin: 20rpx;
    background-color: #FFFFFF;
    border-radius: 10rpx;

    .order-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 20rpx;

      .order-sn {
        font-size: 29rpx;
        font-weight: bold;
      }

      .order-status {
        color: #FD5B00;
        font-weight: 500;
      }
    }

    .goods-list-view {
      padding: 0rpx 20rpx;

      .left_image {
        width: 150rpx;
        height: 150rpx;
        background-color: #f4f4f4;
        margin-right: 20rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .right_box {
        width: 75%;
        height: 150rpx;

        .goods_title {
          margin-bottom: 20rpx;
          font-size: 26rpx;
        }
      }
    }

    .order-price-view {
      padding-right: 20rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;

      .order-total-price {
        color: #82848a;
        margin-left: 10rpx;
      }

      .order-pay-price {
        font-size: 33;
        font-weight: 600;
        margin-left: 8rpx;
      }
    }

    .order-footer {
      padding: 10rpx 20rpx 20rpx;
    }
  }

  .block-popup {
    .header {
      padding: 20rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      font-weight: 600;
    }

    .body {
      padding: 20rpx 30rpx;

      .title {
        font-weight: 600;
      }

      .value {
        display: flex;
        flex-direction: column;

        .radio-view {
          margin: 10rpx 0rpx;
        }
      }
    }

    .footer {
      padding: 0rpx 20rpx;
    }

  }
</style>

<style lang="scss">
  page {
    width: 100%;
    background: url(/static/images/bg.png) no-repeat 0 0;
    background-size: cover;
  }

  .num_box {
    padding: 30rpx 0 50rpx;
    color: #FFDDAE;

    >view:nth-of-type(1) {
      font-size: 60rpx;
    }
  }

  .tabs-view2 {
    padding: 0 30rpx;
    margin-bottom: 10rpx;

    .tabs_item {
      width: 126rpx;
      height: 68rpx;
      border: 2px solid #FF1634;
      color: #FF1634;
      background-color: #fff;
      box-sizing: border-box;
      border-radius: 50rpx;
    }

    .tabs_active {
      background-color: #FF1634;
      color: #fff;
      border: none;
    }
  }
</style>